import 'package:flutter/material.dart';
import 'package:pcms/models/alarm_models.dart';
import 'package:pcms/services/mock_data_service.dart';

class AlarmDataWidget extends StatelessWidget {
  const AlarmDataWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final alarms = MockDataService.getAlarmData();

    return SingleChildScrollView(
      child: Column(
        children: [
          // 第一行：智能送风口报警和方舱空调控制柜 - 左右布局
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 第一栏：智能送风口报警
              Expanded(
                child: _buildAlarmSectionThreePerRow(
                  '智能送风口报警',
                  Icons.air,
                  alarms['smartAirOutletAlarms']!,
                  (alarm) => alarm is SmartAirOutletAlarm,
                  (alarm) => alarm is SmartAirOutletAlarm ? '${alarm.name} (${alarm.address})' : '',
                ),
              ),
              const SizedBox(width: 12),
              // 第二栏：方舱空调控制柜
              Expanded(
                child: _buildAlarmSectionThreePerRow(
                  '方舱空调控制柜',
                  Icons.home_work,
                  alarms['cubicleAirConditionerControlCabinetAlarms']!,
                  (alarm) => alarm is CubicleAirConditionerControlCabinetAlarm,
                  (alarm) => alarm is CubicleAirConditionerControlCabinetAlarm ? '${alarm.name} (${alarm.address})' : '',
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          
          // 第二行：XF-01和XF-02空调机组采集信息 - 左右布局
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 第三栏：XF-01空调机组采集信息
              Expanded(
                child: _buildAlarmSectionThreePerRow(
                  'XF-01空调机组采集信息',
                  Icons.hvac,
                  alarms['xf01AirConditionerAcquisitionAlarms']!,
                  (alarm) => alarm is AirConditionerAcquisitionAlarm,
                  (alarm) => alarm is AirConditionerAcquisitionAlarm ? '${alarm.label} (${alarm.address})' : '',
                ),
              ),
              const SizedBox(width: 12),
              // 第四栏：XF-02空调机组采集信息
              Expanded(
                child: _buildAlarmSectionThreePerRow(
                  'XF-02空调机组采集信息',
                  Icons.hvac,
                  alarms['xf02AirConditionerAcquisitionAlarms']!,
                  (alarm) => alarm is AirConditionerAcquisitionAlarm,
                  (alarm) => alarm is AirConditionerAcquisitionAlarm ? '${alarm.label} (${alarm.address})' : '',
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          
          // 第五栏：空气源模块机组信息
          _buildAlarmSection(
            '空气源模块机组信息',
            Icons.water_drop,
            alarms['airSourceUnitAlarms']!,
            (alarm) => alarm is AirSourceUnitAlarm,
            (alarm) => alarm is AirSourceUnitAlarm ? '${alarm.label} (${alarm.address})' : '',
          ),
        ],
      ),
    );
  }

  // 新增方法：每行显示3项的布局
  Widget _buildAlarmSectionThreePerRow(
    String title,
    IconData icon,
    List<dynamic> alarms,
    bool Function(dynamic) isActiveFilter,
    String Function(dynamic) getDisplayName,
  ) {
    final activeAlarms = alarms.where(isActiveFilter).toList();
    
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFF0B1A3E).withOpacity(0.8),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: const Color(0xFF0A79DF).withOpacity(0.3),
          width: 1,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 栏目标题
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            decoration: const BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  color: Color(0xFF0A79DF),
                  width: 2,
                ),
              ),
            ),
            child: Row(
              children: [
                Icon(
                  icon,
                  color: const Color(0xFF0A79DF),
                  size: 16,
                ),
                const SizedBox(width: 8),
                Container(
                  width: 1,
                  height: 16,
                  color: const Color(0xFF0A79DF),
                ),
                const SizedBox(width: 8),
                Text(
                  title,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 14,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ),
          // 报警项目显示 - 每行3项
          Padding(
            padding: const EdgeInsets.all(8),
            child: activeAlarms.isEmpty
                ? Container(
                    padding: const EdgeInsets.symmetric(vertical: 16),
                    child: const Center(
                      child: Text(
                        '暂无活跃报警',
                        style: TextStyle(
                          color: Colors.grey,
                          fontSize: 12,
                        ),
                      ),
                    ),
                  )
                : LayoutBuilder(
                    builder: (context, constraints) {
                      final itemWidth = (constraints.maxWidth - 16) / 3; // 每行3个项目
                      return Wrap(
                        spacing: 4.0,
                        runSpacing: 4.0,
                        children: activeAlarms.map((alarm) {
                          final displayName = getDisplayName(alarm);
                          return SizedBox(
                            width: itemWidth,
                            child: Container(
                              margin: const EdgeInsets.symmetric(horizontal: 2, vertical: 2),
                              decoration: BoxDecoration(
                                color: const Color(0xFF0B1A3E),
                                borderRadius: BorderRadius.circular(4),
                                border: Border.all(
                                  color: Colors.red.withOpacity(0.3),
                                  width: 1,
                                ),
                              ),
                              child: Padding(
                                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Container(
                                      width: 8,
                                      height: 8,
                                      decoration: BoxDecoration(
                                        color: Colors.red,
                                        borderRadius: BorderRadius.circular(4),
                                        boxShadow: [
                                          BoxShadow(
                                            color: Colors.red.withOpacity(0.3),
                                            blurRadius: 6,
                                            spreadRadius: 2,
                                          ),
                                        ],
                                      ),
                                    ),
                                    const SizedBox(width: 8),
                                    Flexible(
                                      child: Text(
                                        displayName,
                                        style: const TextStyle(
                                          color: Colors.white,
                                          fontSize: 12,
                                        ),
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          );
                        }).toList(),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }

  Widget _buildAlarmSection(
    String title,
    IconData icon,
    List<dynamic> alarms,
    bool Function(dynamic) isActiveFilter,
    String Function(dynamic) getDisplayName,
  ) {
    final activeAlarms = alarms.where(isActiveFilter).toList();
    
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFF0B1A3E).withOpacity(0.8),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: const Color(0xFF0A79DF).withOpacity(0.3),
          width: 1,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 栏目标题
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
            decoration: const BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  color: Color(0xFF0A79DF),
                  width: 2,
                ),
              ),
            ),
            child: Row(
              children: [
                Icon(
                  icon,
                  color: const Color(0xFF0A79DF),
                  size: 16,
                ),
                const SizedBox(width: 8),
                Container(
                  width: 1,
                  height: 16,
                  color: const Color(0xFF0A79DF),
                ),
                const SizedBox(width: 8),
                Text(
                  title,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 14,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ),
          // 报警项目显示
          Padding(
            padding: const EdgeInsets.all(8),
            child: activeAlarms.isEmpty
                ? Container(
                    padding: const EdgeInsets.symmetric(vertical: 16),
                    child: const Center(
                      child: Text(
                        '暂无活跃报警',
                        style: TextStyle(
                          color: Colors.grey,
                          fontSize: 12,
                        ),
                      ),
                    ),
                  )
                : LayoutBuilder(
                    builder: (context, constraints) {
                      final itemWidth = (constraints.maxWidth - 32) / 5; // 修改为每行5个项目
                      return Wrap(
                        spacing: 4.0,
                        runSpacing: 4.0,
                        children: activeAlarms.map((alarm) {
                          final displayName = getDisplayName(alarm);
                          return SizedBox(
                            width: itemWidth,
                            child: Container(
                              decoration: BoxDecoration(
                                color: const Color(0xFF0B1A3E),
                                borderRadius: BorderRadius.circular(4),
                                border: Border.all(
                                  color: Colors.red.withOpacity(0.6),
                                  width: 1,
                                ),
                              ),
                              child: Padding(
                                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 4),
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Container(
                                      width: 8,
                                      height: 8,
                                      decoration: BoxDecoration(
                                        color: Colors.red,
                                        borderRadius: BorderRadius.circular(4),
                                        boxShadow: [
                                          BoxShadow(
                                            color: Colors.red.withOpacity(0.3),
                                            blurRadius: 6,
                                            spreadRadius: 2,
                                          ),
                                        ],
                                      ),
                                    ),
                                    const SizedBox(width: 6),
                                    Flexible(
                                      child: Text(
                                        displayName,
                                        style: const TextStyle(
                                          color: Colors.white,
                                          fontSize: 10,
                                          fontWeight: FontWeight.w500,
                                        ),
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          );
                        }).toList(),
                      );
                    },
                  ),
          ),
        ],
      ),
    );
  }
}